<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <div class="container mx-auto px-4 py-8">
      <!-- 头部 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-800 mb-4">课程学习平台</h1>
        <p class="text-lg text-gray-600">选择练习题目开始学习</p>
        <p class="text-sm text-gray-500 mt-2">课程讲义和示例代码可通过顶部导航栏访问</p>
      </div>

      <!-- 题目列表 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
        <div
          v-for="assignment in assignments"
          :key="assignment.id"
          class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 cursor-pointer transform hover:scale-105"
          @click="selectAssignment(assignment)"
        >
          <div class="p-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-xl font-semibold text-gray-800">{{ assignment.title }}</h3>
              <span
                :class="getDifficultyClass(assignment.difficulty)"
                class="px-3 py-1 rounded-full text-sm font-medium"
              >
                {{ getDifficultyText(assignment.difficulty) }}
              </span>
            </div>
            <p class="text-gray-600 mb-4">{{ assignment.description }}</p>
            <div class="flex items-center text-sm text-gray-500">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
              </svg>
              预计时间：{{ assignment.estimatedTime }}
            </div>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="text-center mt-12">
        <p class="text-gray-500">选择题目后将进入代码编辑器</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAssignmentStore } from '@/stores/assignment'

interface Assignment {
  id: number
  title: string
  description: string
  difficulty: 'easy' | 'medium' | 'hard'
  estimatedTime: string
}

const router = useRouter()
const assignmentStore = useAssignmentStore()

const assignments = ref<Assignment[]>([
  {
    id: 1,
    title: '个人简介页面',
    description: '创建一个包含个人信息、技能和联系方式的简介页面',
    difficulty: 'easy',
    estimatedTime: '30分钟'
  },
  {
    id: 2,
    title: '课程表页面',
    description: '设计一个清晰的课程表，包含时间、课程名称和教室信息',
    difficulty: 'easy',
    estimatedTime: '25分钟'
  },
  {
    id: 3,
    title: '产品展示页面',
    description: '创建一个产品展示页面，包含产品图片、描述和价格',
    difficulty: 'medium',
    estimatedTime: '45分钟'
  },
  {
    id: 4,
    title: '导航菜单',
    description: '设计一个响应式的导航菜单，包含多个页面链接',
    difficulty: 'medium',
    estimatedTime: '40分钟'
  },
  {
    id: 5,
    title: '图片画廊',
    description: '创建一个图片画廊，支持图片预览和描述显示',
    difficulty: 'hard',
    estimatedTime: '60分钟'
  },
  {
    id: 6,
    title: '联系表单',
    description: '设计一个包含验证功能的联系表单页面',
    difficulty: 'hard',
    estimatedTime: '50分钟'
  },
  {
    id: 7,
    title: '待办事项管理',
    description: '使用Vue.js创建一个交互式的待办事项管理应用，支持添加、编辑、删除任务',
    difficulty: 'hard',
    estimatedTime: '60分钟'
  }
])

const selectAssignment = (assignment: Assignment) => {
  assignmentStore.setCurrentAssignment(assignment)
  router.push('/editor')
}

const getDifficultyClass = (difficulty: string) => {
  const classes = {
    easy: 'bg-green-100 text-green-800',
    medium: 'bg-yellow-100 text-yellow-800',
    hard: 'bg-red-100 text-red-800'
  }
  return classes[difficulty as keyof typeof classes]
}

const getDifficultyText = (difficulty: string) => {
  const texts = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return texts[difficulty as keyof typeof texts]
}
</script>